<template>
    <el-collapse style="width: 97%">
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    扩展组合组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script name="ExtensionIndex" setup lang="ts">
import {deepCopy} from "@/utils/ywuCommon";
import {ref} from "vue";

let list = ref([
    {
        name: "表格多选框支持搜索", title: "按钮编辑", component: "TableSelectionSearchComponent", drawerComponent: "TableSelectionSearchDrawer", sourceId: 1,
        propJson: {
            editFlag: true,
            tableDataType: "custom",
            tableDataCustomType: "Array",
            tableDataCustomInfo: "[{\"id\": \"001\", \"name\": \"zhangsan\",\"age\": 20},{\"id\": \"002\", \"name\": \"lisi\",\"age\": 22},{\"id\": \"003\", \"name\": \"wangwu\",\"age\": 23}]",
            tableFieldList: [{variableLabel: "ID", showType: "variable", customHTML: "", variableField: "id", isAlignCenter: "left"},{variableLabel: "姓名", showType: "variable", customHTML: "", variableField: "name", isAlignCenter: "left"}],
            tableSelectField: [],
            selectVarParamName: "",
            tableDataVariableParam: "",
            apiType: "MSOA",
            apiPath: "",
            apiMethod: "GET",
            queryListRequestList: [],
            responseJsonPath: "",
            selectedDataType: "custom",
            selectedDataCustomInfo: "",
            selectedDataCustomType: "Array",
            selectedDataVariableParam: "",
            selectedApiType: "MSOA",
            selectedApiPath: "",
            selectedApiMethod: "GET",
            selectedListRequestList: [],
            selectedResponseJsonPath: "",
            selectedMatchField: "",
            submitActionList: []
        }
    },
    {
        name: "MarkDown编辑器", title: "MarkDown编辑器编辑", component: "MarkDownComponent", drawerComponent: "MarkDownDrawer", sourceId: 2,
        propJson: {
            editFlag: true,
            subfield: "double", // 分栏设置 one - 单栏 double - 双栏
            defaultOpen: "edit", // 默认开启方式 edit - 编辑栏  preview - 预览区
            placeholder: "开始编辑…", // 编辑栏数据为空时展示的数据
            editable: true, // 是否允许编辑
            toolbarsFlag: true, // 工具栏是否展示
            ishljs: true, // 代码是否高亮
            height: "80vh", // 编辑器高度
            bindVariable: "", // 绑定参数
            isBoxShadow: true, // 是否展示背景阴影
            htmlBindVariable: "", // html绑定参数
            actionInfo: {optionValueType: "custom", optionsCustom: "自定义内容", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}, // 文本类容关联
            toolbars: {
                bold: true, // 工具栏 - 粗体
                italic: true, // 工具栏 - 斜体
                header: true, // 工具栏 - 标题
                underline: true, // 工具栏 - 下划线
                strikethrough: true, // 工具栏 - 中划线
                mark: true, // 工具栏 - 标记
                superscript: true, // 工具栏 - 上角标
                subscript: true, // 工具栏 - 下角标
                quote: true, // 工具栏 - 引用
                ol: true, // 工具栏 - 有序列表
                ul: true, // 工具栏 - 无序列表
                link: true, // 工具栏 - 链接
                imagelink: true, // 工具栏 - 图片链接
                code: true, // 工具栏 - code
                table: true, // 工具栏 - 表格
                fullscreen: true, // 工具栏 - 全屏编辑
                readmodel: true, // 工具栏 - 沉浸式阅读
                htmlcode: true, // 工具栏 - 展示html源码
                help: true, // 工具栏 - 帮助
                undo: true, // 工具栏 - 上一步
                redo: true, // 工具栏 - 下一步
                trash: true, // 工具栏 - 清空
                save: true, // 工具栏 - 保存（触发events中的save事件）
                navigation: true, // 工具栏 - 导航目录
                alignleft: true, // 工具栏 - 左对齐
                aligncenter: true, // 工具栏 - 居中
                alignright: true, // 工具栏 - 右对齐
                subfield: true, // 工具栏 - 单双栏模式
                preview: true, // 工具栏 - 预览
            },
            imageInnerVariable: [{ // 上传图片内置变量
                name: "内置参数 file",
                variableName: "",
                type: "custom",
                variableParamName: ""
            }],
            returnUrlJsonPath: "", // 返回参数URL地址数据
            doUploadAction: {apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: []}, // 上传图片动作
            isRelateMarkDownDir: false, // 是否关联markDown外部菜单
            markDownVariable: "", // 如果关联外部菜单时，需要暴露markDown容器Element对象
        }
    },
    {
        name: "MarkDown目录", title: "MarkDown目录编辑", component: "MarkDownDirectoryComponent", drawerComponent: "MarkDownDirectoryDrawer", sourceId: 3,
        propJson: {
            editFlag: true,
            markDownVariable: "", // markDown容器对象存储字段
            height: "", // 目录高度
        }
    },
    {
        name: "菜单列表", title: "菜单列表编辑", component: "MenuListComponent", drawerComponent: "MenuListDrawer", sourceId: 4,
        propJson: {
            editFlag: true,
            listHeight: "", // 菜单列表的高度
            // 获取列表的数据
            actionInfo: {optionValueType: "custom", optionsCustom: "[{\"index\": 1, \"title\": \"列表数据\"}]", optionsCustomValueType: "Object", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            defaultActiveActionInfo: {optionValueType: "custom", optionsCustom: "自定义内容", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            menuIndex: "$.index", // 列表个体唯一标识字段
            isClickAction: false, // 是否开启菜单点击事件
            clickAction: [{isAsyncAction: false}], // 菜单点击事件
            menuTitle: "$.title", // 菜单标题字段
            subMenuFieldName: "", // 子列表字段名称
            backgroundColor: "#545c64", // 背景色
            textColor: "#fff", // 字体颜色
            activeTextColor: "#ffd04b", // 菜单激活时的字体颜色
            menuClickInnerRequestVariable: [{ // 点击请求时的url内置变量
                name: "内置参数 menuIndex",
                variableName: "",
                type: "custom",
                variableParamName: ""
            }, {
                name: "内置参数 menuTitle",
                variableName: "",
                type: "custom",
                variableParamName: ""
            }, {
                name: "内置参数 item",
                variableName: "",
                type: "custom",
                variableParamName: ""
            }],
        }
    },
    {
        name: "可编辑表格", title: "可编辑表格编辑", component: "EditableTableListComponent", drawerComponent: "EditableTableListDrawer", sourceId: 5,
        propJson: {
            editFlag: true,
            tableDataVariable: "", // 动态表格数据关联的变量
            // 表格的字段
            tableFieldList: [
                {variableLabel: "ID", variableField: "id", isAlignCenter: "left", isEditor: false, editorType: "input",
                    isDisable: false, // 是否禁用
                    optionLabel: "$.label", // 下拉菜单label
                    optionValue: "$.value", // 下拉菜单value
                    isOptionClickAction: false, // 是否点击触发下拉查询
                    actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
                        apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}},
                {variableLabel: "姓名", variableField: "name", isAlignCenter: "left", isEditor: false, editorType: "input",
                    isDisable: false, // 是否禁用
                    optionLabel: "$.label", // 下拉菜单label
                    optionValue: "$.value", // 下拉菜单value
                    isOptionClickAction: false, // 是否点击触发下拉查询
                    actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
                        apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}}
            ],
            isBorder: false, // 外边框线
            isStripe: false, // 斑马纹
            isOverFlowTip: false, // 溢出提示
            isMaxHeight: false, // 最大高度
            maxHeight: "", // 最大高度
            isSelection: false, // 是否添加复选列
            selectVarParamName: "", // 复选列管理的变量
            operationWidth: 300, // 操作列的宽度
            isAddData: true, // 是否可添加
            isDeleteData: true, // 是否可删除
            isSonTable: false, // 是否支持内嵌表格
            sonTableName: "", // 内嵌表格数组的字段名称
            sonTableTypeName: "", // 内嵌表格标识的字段名称
            isAddSonTable: false, // 是否可添加内嵌表格
            isDynamicColumns: false, // 是否启用动态列
            dynamicColumnsInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        }
    },
    {
        name: "视频播放器", title: "视频播放器编辑", component: "VueVideoPlayComponent", drawerComponent: "VueVideoPlayDrawer", sourceId: 6,
        propJson: {
            editFlag: true,
            width: "800px", // 播放器宽度
            height: "500px", // 播放器高度
            loop: false, // 是否循环播放
            volume: 0.5, // 初始音量（范围 0-1）
            videoSrcValueParam: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            posterSrcValueParam: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        }
    },
    {
        name: "富文本编辑器", title: "富文本编辑器编辑", component: "RichEditorComponent", drawerComponent: "RichEditorDrawer", sourceId: 7,
        propJson: {
            editFlag: true,
            contentVariable: "", // 关联变量
            limitImageSize: "10",
            limitImageType: ["image/jpeg", "image/png", "image/gif", "image/webp"],
            isAddImageUpload: false,
            imageUploadUrl: "",
            imageUploadMethod: "POST",
            imageUploadFileName: "file",
            isShowToolbar: true, // 是否展示工具栏
            isShowMenuBar: true, // 是否展示菜单栏
            maxHeight: "", // 富文本高度
        }
    },
    {
        name: "BPMN展示", title: "BPMN展示编辑", component: "BpmnShowComponent", drawerComponent: "BpmnShowDrawer", sourceId: 8,
        propJson: {
            editFlag: true,
            height: "500px", // 高度
            bpmnXmlInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        }
    }
]);

function cloneDefaultField(e) {
    let copyE = deepCopy(e);
    copyE.ruleInfo = {
        ruleInfoList: []
    }
    return copyE;
}

function onStart(e) {
    e.item._underlying_vm_.id = generateUUID();
}

function randomNumber() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

function generateUUID() {
    return (randomNumber() + randomNumber() + "-" + randomNumber() + "-" + randomNumber() +
        "-" + randomNumber() + "-" + randomNumber() + randomNumber() + randomNumber());
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>